<template>
  <div>
    <!-- 反馈建议信息 -->
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>反馈建议信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0">
            <span style="font-weight:700;">用户ID</span>
            <el-input v-model="searchUserId" clearable placeholder="请输入用户ID" prefix-icon="el-icon-search" style="margin-left:5px;width: 150px" />
            <span style="font-weight:700; margin-left:10px;">反馈关键词</span>
            <el-input v-model="searchKeyWord" clearable placeholder="请输入反馈关键词" prefix-icon="el-icon-search" style="margin-left:5px;width:150px" />
            <span style="font-weight:700;margin-left:10px;">态度</span>
            <el-select v-model="value" placeholder="请选择" style="width:150px; margin-left:5px;">
              
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <span style="font-weight:700; margin-left:10px;">受理状态</span>
  <el-select v-model="value1" placeholder="请选择" style="width:150px;margin-left:5px;">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
            <el-button icon="el-icon-search" @click="load"
              style="background-color: #143371;margin-left:10px; color: aliceblue;">搜索</el-button>
            <el-button icon="el-icon-refresh-left" style="margin-left:10px;background-color: #143371; color: aliceblue;"
              @click="reset">重置</el-button>
              
     <download-excel style="display: inline;"
                class="export-excel-wrapper"
                :data="tableData"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="失物信息"
    >
      <el-button style="background-color: #143371; color: aliceblue;"
           >导出</el-button>
    </download-excel>
            
          </div>
        </div>
        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="用户ID">
                  <span>{{ props.row.userId }}</span>
                </el-form-item>
                <el-form-item label="反馈内容">
                  <p>{{ props.row.context }}</p>
                </el-form-item>
                <el-form-item label="反馈态度">
                  <span>{{  props.row.attitude==0?"差评":props.row.attitude==1?"中立":"好评" }}</span>
                </el-form-item>
                <el-form-item label="反馈状态">
                  <span>{{ props.row.isRead==0?"未受理":"已受理"}}</span>
                </el-form-item>
                <el-form-item label="处理标题">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="处理时间">
                  <span>{{ props.row.createTime }}</span>
                </el-form-item>
                <el-form-item label="处理结果">
                  <p>{{ props.row.backContext }}</p>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>


          <el-table-column label="#" type="index" width="100px" />
          <el-table-column label="编号" prop="id" sortable width="130px" />
          <el-table-column label="用户id" prop="userId" width="180px" />
          <el-table-column label="内容" prop="context" width="270px" />
           
          
          <el-table-column label="态度" width="180px" >
              <template slot-scope="scope">
                <span>{{ scope.row.attitude==0?"差评":scope.row.attitude==1?"中立":"好评" }}</span>
              </template>

            </el-table-column>
          <el-table-column label="意见反馈"  width="190px">
            <template slot-scope="scope">
              
                <span v-if="scope.row.isRead==0">  未受理</span>
                <span v-if="scope.row.isRead==1">  已受理</span>
               
              </template>
          </el-table-column>
          <el-table-column label="回复" prop="backContext" width="270px" />
          <el-table-column label = "反馈处理" width = "100px">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isRead==0" type="primary" plain @click="Solve(scope.$index,scope.row)">处理</el-button>  
              <el-tag v-if="scope.row.isRead==1" type="primary" >已处理</el-tag>  
            </template>

          </el-table-column>
  
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <div>
          <el-dialog title="反馈处理" :visible.sync="messageFormVisible">
            <el-form ref="messageForm" :model="messageForm" label-width="120px">
              <el-form-item label="处理结果标题" >
                <el-input v-model="messageForm.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="系统信息" >
                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="messageForm.context">
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="solveCancel">取 消</el-button>
              <el-button type="primary" @click="solvesummit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "SceneryInfo",
  data() {
    // const fieldName = ["意见ID", "用户ID", "意见内容","意见态度","反馈是否受理"];
    //     const filterVal = ["id", "userid", "context","attitude","isRead"];
    return {
      json_fields:{
        意见ID:'id',
        用户ID:'userId',
        意见内容:'context',
        意见态度:{
          field:"attitude",
          callback:value=>{
            if(value==0){
              return '差评'
            }else if(value==1){
              return '中立'
            }else{
              return '好评'
            }
          }
        },
        
        反馈是否受理:{
          field: "isRead",
          //自定义回调函数
          callback: value => {
            if(value==1){
              return '已受理'
            }else {
              return '未受理'
            }
          }
        }

      },
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchUserId:"",
      searchKeyWord:"",
      messageFormVisible:false,
      adviceId:0,
      messageForm:{
        title:'',
        context:'',
      },
      options: [{
          value:'0',
          label: '差评'
        }, {
          value: '1',
          label: '中立'
        }, 
      {
        value:'2',
        label:'好评',
      }],
      value: '',
        options1: [{
          value: '1',
          label: '已受理'
        }, {
          value: '0',
          label: '未受理'
        }, 
      ],
        value1: '',
      tableData: [
        {
          id:1,
          userid:20021010,
          context:'沙县小吃空有虚高的评分，味道却难以客观评价',
          attitude:0,
          isRead:1,
          backContext:'',
        }
      ],
      form: {

        id:1,
          userid:20021010,
          context:'沙县小吃空有虚高的评分，味道却难以客观评价',
          attitude:0,
          isRead:1,
          backContext:'',

      },
      
      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },

  methods: {


    async load() {
      request.get("/user-advise/list", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                searchUserId: this.searchUserId,
                searchKeyWord:this.searchKeyWord,
                status:this.value1,
                attitude:this.value
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.userAdviseList;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    resize(str)
    {
        if(str.length>10)
        {
          str = str.substr(0,10)
          str = str+'...'
        }
        return str
    },
    reset() {
      this.searchUserId = '',
      this.searchKeyWord='',
      request.get("/user-advise/reset", {
          params: {
              pageNum: 1,
              pageSize: this.pageSize,
          },
      }).then((res) => {
          console.log(res);
          this.tableData = res.data.userAdviseList;
          this.total = res.data.total;
          this.loading = false;
          this.value1='',
          this.value = ''
      });
    },
    
    // export2Excel() {
    //   require.ensure([], () => {
    //     const { export_json_to_excel } = require("@/excel/Export2Excel");
    //     const fieldName = ["意见ID", "用户ID", "意见内容","意见态度","反馈是否受理"];
    //     const filterVal = ["id", "userid", "context","attitude","isRead"];
    //     const data = this.tableData.map(v => filterVal.map(j => v[j]));
    //     export_json_to_excel(fieldName, data, "反馈列表");
    //   });
    // },
  
    add() {
      this.dialogVisible = true;
      this.judge = false;
      this.form = {}
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },
    Solve(index,row)
    {
        this.adviceId = row.id;
        this.messageForm.userId = row.userId
        this.messageFormVisible = true
    },
    solveCancel()
    {
      this.adviceId = 0;
      this.messageForm = {};
      this.messageFormVisible = false;

    },
    solvesummit()
    {
      this.messageForm.adviceId = this.adviceId;
      
      request.put("/system-message/add", this.messageForm).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.load()
                  this.dialogVisible = false
                  this.messageForm = {}
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
            this.messageFormVisible = false
    },

  }
  


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
</style>